<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="" name="keywords">
    <meta content="" name="description">
    <title th:text="个人信息页"></title>
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}">
    <link href="../../admin/css/other/center.css" rel="stylesheet"/>
    <style>
        .layui-form-item {
            margin-top: 17px !important;
            margin-bottom: 17px !important;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 25px;">
                <div class="text-center layui-text">
                    <div class="user-info-head" id="userInfoHead">
                        <img alt="图片加载失败" height="115px" id="avatar" src="" width="115px">
                    </div>
                    <h2 style="padding-top: 20px;font-size: 20px;" th:text="${session.userInfo.getNickname()}"></h2>
                    <p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
                </div>
            </div>
        </div>
        <!--        <div class="layui-card">-->
        <!--            <div class="layui-card-header">-->
        <!--                登录记录-->
        <!--            </div>-->
        <!--            <div class="layui-card-body">-->
        <!--                <ul class="list">-->
        <!--                    <li class="list-item" th:each="log:${logs}"><span class="title" th:text="${log.title}"></span><span-->
        <!--                            class="footer" th:text="${log.createTime}"></span></li>-->
        <!--                </ul>-->
        <!--            </div>-->
        <!--        </div>-->
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header">个人信息</div>
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief">
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form">
                                <div class="layui-form-item layui-hide">
                                    <label class="layui-form-label">编号</label>
                                    <div class="layui-input-block">
                                        <input autocomplete="off" class="layui-input" lay-verify="title"
                                               name="id"
                                               placeholder="请输入标题" th:value="${session.userInfo.getId()}" type="text">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-inline">
                                        <input autocomplete="off" class="layui-input"
                                               name="username"
                                               placeholder="请输入用户名"
                                               readonly th:value="${session.userInfo.getUsername()}" type="text">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">用户名不可更改</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">昵称</label>
                                    <div class="layui-input-inline">
                                        <input autocomplete="off" class="layui-input" lay-verify="nickname"
                                               name="nickname"
                                               placeholder="请输入昵称" th:value="${session.userInfo.getNickname()}"
                                               type="text">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">邮箱</label>
                                    <div class="layui-input-inline">
                                        <input autocomplete="off" class="layui-input" lay-verify="email" name="email"
                                               placeholder="请输入邮箱" th:value="${session.userInfo.getEmail()}"
                                               type="text">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">权限</label>
                                    <div class="layui-input-inline">
                                        <select name="role" th:disabled="${session.userInfo.getRole()!='root'}">
                                            <option value="">请选择用户权限</option>
                                            <option value="root" th:selected="${session.userInfo.getRole()=='root'}">
                                                超级管理员
                                            </option>
                                            <option value="admin" th:selected="${session.userInfo.getRole()=='admin'}">
                                                管理员
                                            </option>
                                            <option value="user" th:selected="${session.userInfo.getRole()=='user'}">
                                                普通用户
                                            </option>
                                        </select>
                                    </div>
                                    <div class="layui-form-mid layui-word-aux"
                                         th:text="${session.userInfo.getRole()!='root'?'请联系超级管理员进行修改':''}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-filter="user-update"
                                                lay-submit>修改资料
                                        </button>
                                        <button class="pear-btn pear-btn-sm edit-password">更改密码</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                我的文章
            </div>
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-row layui-col-space10" style="margin: 15px;">
                                <div class="layui-col-md1">
                                    <img src="../../admin/images/act.jpg"
                                         style="width: 100%;height: 100%;border-radius: 5px;"/>
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                                        4
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 15px;">
                                <div class="layui-col-md1">
                                    <img src="../../admin/images/act.jpg"
                                         style="width: 100%;height: 100%;border-radius: 5px;"/>
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                                        4
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 15px;">
                                <div class="layui-col-md1">
                                    <img src="../../admin/images/act.jpg"
                                         style="width: 100%;height: 100%;border-radius: 5px;"/>
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                                        4
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 15px;">
                                <div class="layui-col-md1">
                                    <img src="../../admin/images/act.jpg"
                                         style="width: 100%;height: 100%;border-radius: 5px;"/>
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                                        4
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/component/layui/layui.js}"></script>
<script th:src="@{/component/pear/pear.js}"></script>
<script th:src="@{/js/jquery/jquery.min.js}" charset="utf-8"></script>
<script th:inline="javascript">
    let basePath = [[${#httpServletRequest.getContextPath()}]];
    layui.use(['element', 'jquery', 'layer', 'form', 'convert'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        let convert = layui.convert;

        $(".edit-password").click(function () {
            layer.open({
                type: 2,
                title: '修改密码',
                shade: 0.1,
                area: ['550px', '280px'],
                content: basePath + '/admin/password.html'
            });
            return false;
        })

        let image = new Image();
        image.src = basePath + "/file/getHeadImg";
        image.onload = function () {
            $("#avatar").attr("src", convert.imageToBase64(image));
        }

        $("#avatar").click(function () {
            layer.open({
                type: 2,
                title: '更换图片',
                shade: 0.1,
                area: ["900px", "500px"],
                content: basePath + '/admin/profile.html',
                // '/' + [[${session.userInfo.getId()}]],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    window['layui-layer-iframe' + index].submitForm();
                }
            });
        });

        form.on('submit(user-update)', function (data) {

            let loginLayer;
            loginLayer = layui.layer.msg('正在修改', {icon: 16, shade: 0.01, time: 0});
            $.ajax({
                url: '/user/updateUserDate',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    layui.layer.close(loginLayer);
                    console.log(result);
                    if (result.code == 1) {
                        //成功
                        layui.layer.msg(result.msg, {icon: 1});
                    } else {
                        //失败
                        layer.msg(result.msg, {icon: 2});
                    }
                },
                error: function (arg) {
                    layui.layer.close(loginLayer);
                    layer.msg(arg);
                }
            })
            return false;
        });

        //自定义验证规则
        form.verify({
            nickname: [
                /^[^\s]*$/
                , '昵称不能出现空格'
            ]
            , password: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

    })
</script>
</body>
</html>
